<template>
	<view class="">
		<view v-show="activityInfo.countdown == true" class="active-tiem">距离抢购开始还有：{{countDown}}</view>
		<noData v-if="list.length < 1" type="1" ndText="抢购商品已售空"></noData>
		<view class="list-box" v-else>
			<view class="list-item" v-for="(item,index) in list" :key="index"
				@click="handleClick('/pages/index/shopDetail/shopDetail?detailType='+detailType+'&id='+item.id+'&activityId='+activityId+'&isJifen='+isJifen)">
				<image class="list-item-img" :src="$IMG_URL+item.image" mode=""></image>
				<view class="list-item-title">{{item.name}}</view>
				<view class="list-item-price">
					<view class="">
						<text>{{isJifen == 1 ? '￥':'积分:'}}</text>{{item.price}}
					</view>
				</view>
				<view class="list-item-people" v-show="detailType == 1 && item.bt == 1">
					补贴金额：{{item.subsidy}}
				</view>
				<view class="list-item-people" v-show="detailType == 1">
					所属人：{{item.nickname}}
				</view>
				<!--  style="color: #DD0403;" -->
			</view>
		</view>
	</view>

</template>

<script>
	import noData from '@/components/no-data.vue';
	export default {
		components: {
			noData
		},
		props: {
			isJifen:{
				detailType: [Boolean, String],
				default: () => 1 //1 其他 2 积分
			},
			list: {
				type: Array,
				default: () => []
			},
			detailType: {
				detailType: [Number, String],
				default: () => 1 //1积分 2 首页 3积分
			},
			activityId:{
				detailType: [Number, String],
				default: () => '' 
			}
		},
		name: "goos-list",
		data() {
			return {
				countDown: '', // 假设倒计时10秒
				activityInfo: '' //获取首页活动
			};
		},
		created() {
			this.init();
		},
		methods: {
			init(){
				// 获取首页活动
				this.$http('index.getActivityList', {}, '获取中...').then(res => {
					if (res.code == 1) {
						this.activityInfo = res.data
						// 假设服务器返回的时间戳（单位：秒）
						this.getLiveTimeCount(res.data.start_time)
					}
				})
			},
			getLiveTimeCount(end_time) {
				if (end_time) { //如果设置了开始时间
					this.liveCountTimes = setInterval(() => {
						let nowTime = new Date().getTime();
						let preTime = new Date(end_time * 1000).getTime()
						let obj = null;
						if (preTime - nowTime > 0) {
							let time = (preTime - nowTime) / 1000;
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							obj = {
								day: day < 10 ? '0' + day : day,
								hou: hou < 10 ? '0' + hou : hou,
								min: min < 10 ? '0' + min : min,
								sec: sec < 10 ? '0' + sec : sec
							};
							// obj.day + '天' +
							this.countDown = obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
						} else {
							obj = {
								day: '00',
								hou: '00',
								min: '00',
								sec: '00'
							};
							this.countDown = obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							clearInterval(this.liveCountTimes)
						}
					}, 1000)
				} else {
					this.countDown = "开始时间待定"
				}
			},
			handleClick(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F6F7F9;
	}
	.active-tiem {
		margin: 10rpx 0 20rpx  10rpx;
		font-size: 24rpx;
		color: 000;
	}
	.list-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.list-item {
			width: 290rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx;

			.list-item-img {
				width: 100%;
				height: 344rpx;
				border-radius: 10rpx;
			}

			.list-item-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin: 6rpx 0;
			}

			.list-item-price {
				font-weight: 600;
				font-size: 32rpx;
				color: #DD0403;
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #DD0403;
					margin-right: 10rpx;
				}


			}

			.list-item-people {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				text-stroke: 1px rgba(0, 0, 0, 0);
				// text-align: right;
				margin-top: 15rpx;
			}
		}
	}
</style>